<template>
  <div class="main">
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in moreimg">
            <img :src=url+item alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="nurse">
      <div class="left">
        <h3>{{name}}</h3>
        <p v-if="status==3 || status==6">最低 ¥{{parseInt(min_price)}}</p>
        <p  v-if=" status==7"> ¥{{parseInt(real_price)}}</p>
        <p v-if="status==1 || status==2 ||status==4 ||status==5"> ¥{{end_price}}</p>
        <del>¥{{parseInt(show_price)}}</del>
      </div>
      <div class="right">
        <div class="circle" v-if="status==6 || status ==3">
          <div></div>
        </div>
        <p v-if="status==6 || status ==3">截止时间</p>
        <p v-if="status==7">使用截止日期</p>
        <p v-if="status==1 || status==2 ||status==4 || status==5">使用截止日期</p>
        <span v-if="status==6 || status ==3">{{group_deadline}}</span>
        <span v-if="status==7">{{group_invalid}}</span>
        <span v-if="status==1 || status==2 ||status==4 || status==5">{{group_invalid}}</span>
        <p v-if="status==1" :class="{'color1':(status==1)}">已成功</p>
        <p v-if="status==2" :class="{'color2':(status==2)}">已结束</p>
        <p v-if="status==4" :class="{'color4':(status==4)}">已使用</p>
        <p v-if="status==5" :class="{'color5':(status==5)}">已过期</p>
      </div>
    </div>
    <div class="group">
      <div class="logo">
        <div></div>
        <span></span>
        <h3>拼团进度</h3>
      </div>
      <ul>
        <li class="process" v-for="(item,index) in progress" v-if="index == 0">
          <div class="box">
            <div class="lingbox" v-if="item.active == 1">
              <div class="ling"></div>
            </div>
            <div v-if="item.active == 0"></div>
            <p :class="{mj:item.active==1}">{{item.title}}</p>
          </div>
          <p class="stage" v-if="item.active == 1 && group_join_num !== group_play_num">◀目前</p>
          <p class="stage" v-if="item.active == 1 && group_join_num == group_play_num">◀已完成</p>
        </li>
        <li class="process" v-for="(item,index) in progress" v-if="index > 0">
          <div class="line">
            <div></div>
          </div>
          <div class="box">
            <div class="lingbox" v-if="item.active == 1">
              <div class="ling"></div>
            </div>
            <div v-if="item.active == 0"></div>
            <p :class="{mj:item.active==1}">{{item.title}}</p>
          </div>
          <p class="stage" v-if="item.active == 1 && group_join_num !== group_play_num">◀目前</p>
          <p class="stage" v-if="item.active == 1 && group_join_num == group_play_num">◀已完成</p>
        </li>
      </ul>
    </div>
    <tuanbottom :describe='describe' :play_title='play_title' :play_desc="play_desc"></tuanbottom>

    <!-- 团结束的弹框 -->
    <div class="foot" v-if="enable == 1">
      <p>该团已完成</p>
      <a @click="request()">我要开团</a>
    </div>

    <PulseLoader v-if="loading==true"  :size="size" :color="color"></PulseLoader>
    <!-- 中间人参团成功 弹框-->
    <div class="popup" v-show="onShow == true" v-if="status==3 || status==6 || status==7">
      <div class="popcon">
        <div class="close" @click="onShow=false">
          <img src="../../img/close.png" alt="">
        </div>
        <img src="../../img/jiantou.png" alt="" class="jiantou">
        <h3 v-if="accountType == 1 && (status==3 ||status==6)">赶快分享给好友,<br>成团后即可领取红包！</h3>
        <h3 v-if="accountType == 2 && (status==3 ||status==6)">邀请好友一同参团,下一位好友成功购买即可获得{{next_refund}}元返现！</h3>
        <h3 v-if="accountType == 3 && (status==3 ||status==6)">赶快分享给更多好友吧!</h3>
        <h3 v-if="status==7">赶快分享给更多好友吧!</h3>
      </div>
    </div>

    <!-- 返回首页的按钮图标 -->
    <div class="gohome">
	  <a :href="myUrl+'/?zzypropid=1'">
        <i class="iconfont">&#xe634;</i>
        <p>首页</p>
      </a>
    </div>

    <!-- 开团成功 -->
    <div class="prop" v-show="isShow">
      <div class="propcon">
        <p v-if="num==0" :class="{marTop:num==0}">{{message}}</p>
        <p v-if="num==1" :class="{marTop:num==1}">开团成功!</p>
        <p v-if="num==2" :class="{width:num==2}">{{message}}</p>
        <a :href="myUrl+'/'" v-if="num == 0">返回首页</a>
        <a :href="myUrl+'/availableshop'" v-if="num ==2 || num ==1">查看我的拼团</a>
        <div><span class="" @click="isShow = false">×</span></div>
      </div>
    </div>

    <!-- 最后一个开团的人 -->
    <div class="prop1" v-show="lastShow">
      <div class="propcon" >
        <p>{{busymessage}}</p>
        <a  @click="lastreload(),isShow=false">确定</a>
      </div>
    </div>

    <!-- 登陆注册弹框 -->
    <judge :judgeNum="judgeNum"></judge>
  </div>
</template>

<script>
  import $ from "jQuery";
  import tuantop from "./tuantop.vue";
  import judge from "./judge.vue";
  import tuannurse from "./tuannurse.vue";
  import tuanbottom from "./tuanbottom.vue";
  import tuanprocess from "./tuanprocess.vue";
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
  import {
    baseUrl,auth,myUrl,
  } from "@/assets/public";
  import wx from 'weixin-js-sdk';
  export default {
    name: 'main',
    data () {
      return {
        judgeNum:0,
        busymessage:"",
        lastShow:false,
        isShow:false,
        url:"",
        myUrl:myUrl,
        onShow:true,
        moreimg:"",
        name:"",
        real_price:"",
        show_price:"",
        play_title:"",
        play_desc:"",
        describe:"",
        progress:"",
        path:"/",
        status:"",
        loading:true,
        size:".5rem",
        color:"#333",
        shareTitle:"我已参加美丽田园爱拼才美丽，就差你了！一起体验涛姐最爱护理!",
        lineLink:"",
        imgUrls:myUrl+"/static/img/share.png",
        descContent:"越“拼”越实惠，越“拼”价越低",
        appShareTitle:"我已参加美丽田园爱拼才美丽，就差你了！一起体验涛姐最爱护理!",
        open_id:"",
        group_play_num:"",
        group_join_num:"",
        group_deadline:"",
        group_invalid:"",
        time:"",
        min_price:"",
        end_price:"",
        num:0,
        enable:"",
        message:"",
        group_id:"",
        accountType:"",
        next_refund:"",
      }
    },
    created(){
      auth();
    },
    mounted(){
      var that = this;
      this.url = baseUrl;
      this.myUrl= myUrl;
      var id = this.$route.query.id;
      var join_id =this.$route.query.join_id;
      that.enable =this.$route.query.enable;

      $.ajax({
        data:{
          "openid": localStorage.openid
        },
        type:"GET",
        url: baseUrl+"/api/myGroupInfo/"+id+"/"+join_id,
        dataType:"json",
        success:function (res) {
          if (res.status == 200){
            that.des = res.data.describe;
            that.moreimg =res.data.more_img;
            that.name=res.data.name;
            that.real_price=res.data.group_real_price;
            that.show_price=res.data.group_show_price;
            that.describe=res.data.describe;
            that.progress=res.data.progress;
            that.play_title=res.data.play_title;
            that.play_desc=res.data.play_desc;
            that.status=res.data.status;
            that.group_invalid=res.data.group_invalid;
            that.group_deadline= res.data.group_deadline;
            that.group_deadline= that.getCountDown(that.group_deadline);
            that.min_price=res.data.min_price;
            that.group_play_num=res.data.group_play_num;
            that.group_join_num=res.data.group_join_num;
            that.end_price=res.data.end_price;
            that.open_id=res.data.open_id;
            that.group_id=res.data.group_id;
            that.accountType=res.data.accountType;
            that.next_refund=res.data.next_refund;

            if(that.status==3 || that.status==6 ){
              that.lineLink =that.myUrl+"/cantuan?id="+that.open_id;  //进行中
            }else if(that.status==7){
              that.lineLink =window.location.href+"&enable=1"; //可使用
            }else {
              that.lineLink =window.location.href; //已完成
            }
            that.wechatShare();
            that.loading=false;

          }else if(res.status==-200) {
            that.$router.push({path:myUrl+"/notfound"});
          }else if(res.status==-300) {
            $.ajax({
              url:baseUrl+"/api/checkUser",
              type:"GET",
              dataType:"json",
              data:{'openid':localStorage.openid,'access_token':localStorage.access_token,'randstr':localStorage.randstr},
              success:function (res) {
                if(res.status==200){
                  window.location.reload();
                }else if(res.status==300){
                  that.judgeNum =1;
                }else if(res.status==-300){
                  that.lastShow=true;
                  that.num=4;
                  that.busymessage=res.data.message;
                }
              }
            })
          }
        }
      });

      //banner轮播
      this.$nextTick(function () {
        var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          spaceBetween: 30,
          autoplay: 3000,
          observer:true,
          observeParents:true,//修改swiper的父元素时，自动初始化swiper
        });
      });

    },
    methods: {
      request(){
        var that = this;
        $.ajax({
          data:{
            "openid": localStorage.openid
          },
          type:"POST",
          url: baseUrl+"/api/openGroup/"+that.group_id,
          dataType:"json",
          success:function (res) {
//                      console.log(res);
            if(res.status==200){
              that.isShow=true;
              that.num=1;   //返回200不用付钱,直接弹窗成功跳回首页
            }else if(res.status==-200){
              that.isShow=true;
              that.num=0;
              that.message=res.message;
//                        setTimeout(function () {
//                          that.isShow=false;
//                        },2000)
            }else if(res.status==-221){
              that.isShow=true;
              that.num=2;
              that.message=res.message;

            }else if(res.status==220){//返回220前去支付
              that.isShow=false;
              that.callpay($.parseJSON(res.data));
            }else if(res.status==-300){
              $.ajax({
                url:baseUrl+"/api/checkUser",
                type:"GET",
                dataType:"json",
                data:{'openid':localStorage.openid,'access_token':localStorage.access_token,'randstr':localStorage.randstr},
                success:function (res) {
                  if(res.status==200){
                    that.request();
                  }else if(res.status==300){
//                            location.href = myUrl+'/register?openid='+res.data.openid+'&bang_url='+res.data.bang_url;
                    that.judgeNum =1;
                  }else if(res.status==-300){
                    that.lastShow=true;
                    that.busymessage=res.data.message;
                  }
                }
              })
            }
          }
        })

      },
      jsApiCall(jsApiParameters){
        var that = this;
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', jsApiParameters,
          function(res){
            WeixinJSBridge.log(res.err_msg);
//                    alert(res.err_code+res.err_desc+res.err_msg);
            if(res.err_msg == "get_brand_wcpay_request:ok"){
//                      window.location.reload();
              that.isShow=true;
              that.num=1;
            }
          }
        );
      },
      callpay(jsApiParameters) {
        var that = this;
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', jsApiCall);
            document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
          }
        } else {
          that.jsApiCall(jsApiParameters);
        }
      },
      wechatShare(){
        let that = this;
        wx.ready(function (){
          console.log('zhy测试:'+that.shareTitle);
          wx.onMenuShareTimeline({
            title: that.shareTitle, // 分享标题
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareAppMessage({
            title: that.appShareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {

            },
            cancel: function () {}
          });
          wx.onMenuShareQQ({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareWeibo({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户取消分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareQZone({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户取消分享后执行的回调函数

            },
            cancel: function () {}
          });
        })
      },
      getCountDown(timestamp){
        var that =this;
        setInterval(function(){
          var nowTime = new Date();
          var endTime = new Date(timestamp * 1000);

          var t = endTime.getTime() - nowTime.getTime();
          //            var d=Math.floor(t/1000/60/60/24);
          var day =Math.floor(t/1000/60/60/24);
          var hour=Math.floor(t/1000/60/60%24);
          var min=Math.floor(t/1000/60%60);
          var sec=Math.floor(t/1000%60);

          if (day < 10) {
            day = "0" + day;
          }
          if (hour < 10) {
            hour = "0" + hour;
          }
          if (min < 10) {
            min = "0" + min;
          }
          if (sec < 10) {
            sec = "0" + sec;
          }
          if(day>=1){

            that.group_deadline = day +"天" + hour + "时" + min + "分" + sec + "秒";

          }else if(day<1){

            that.group_deadline = day +"天" + hour + "时" + min + "分" + sec + "秒";

          }
        },1000);

      },
      lastreload(){
        window.location.reload();
      }
    },
    components:{
      tuantop,tuannurse,tuanprocess,tuanbottom,PulseLoader,judge,
    }
  }
</script>

<style scoped>
  @import "../../static/font_880fex1d3q6c4n29/iconfont.css";
  .prop {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .prop .propcon {
    width: 80%;
    padding:0 10%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    background: url("../../img/prop.png") center center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
    position: relative;
  }

  .prop .propcon p {
    width: 100%;
    /*padding:0 20%;*/
    height:auto;
    text-align: center;
    margin-top:3.5rem;
    font-size:.38rem;
    line-height:.6rem;
  }
  .width {
    width:65% !important;
  }
  .marTop {
    margin-top:2.5rem !important;
  }
  .marTop2 {
    margin-top:2.5rem !important;
  }
  .prop .propcon a {
    display: block;
    width: 3rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    border:1px solid #000;
    /*margin-bottom:2rem;*/
  }
  .prop .propcon div {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom:.7rem;
    left:0;
  }
  .prop .propcon span {
    font-size:.8rem;
    color: #666;
  }
  .prop1 {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .prop1 .propcon {
    width: 80%;
    padding:0 10%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    background: url("../../img/prop.png") center center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
  }

  .prop1 .propcon p {
    width: 100%;
    /*padding:0 20%;*/
    height:auto;
    text-align: center;
    margin-top:3.5rem;
    font-size:.38rem;
    line-height:.6rem;
  }
  .width {
    width:65% !important;
  }
  .marTop {
    margin-top:5.5rem !important;
  }
  .marTop2 {
    margin-top:5.5rem !important;
  }
  .prop1 .propcon a {
    display: block;
    width: 3rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    border:1px solid #000;
    /*margin-bottom:2rem;*/
  }
  .foot {
    width: 80%;
    padding:0 10%;
    height: 1.5rem;
    border-top:1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content:space-between;
    position: fixed;
    bottom:0;
    left:0;
    background: #ffffff;
  }
  .foot p {
    font-size:.4rem;
  }
  .foot p span {
    color: #ff5454;
  }
  .foot a {
    display: block;
    width: 4rem;
    text-align: center;
    height:1rem;
    line-height:1rem;
    background: #000;
    color: #ffffff;
    letter-spacing: 2px;
    font-size:.4rem;
  }
  .gohome {
    width: 1.5rem;
    height:1.5rem;
    position: fixed;
    bottom:2rem;
    right:0;
    background: rgba(76,76,76,.5);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right:.5rem;
  }
  .gohome a {
    width: 2rem;
    height:1.4rem;
    text-align: center;
  }
  .gohome a i {
    display: block;
    font-size:.6rem;
    margin-top:.2rem;
    color: #ffffff;
  }
  .gohome a p {
    font-size:.32rem;
    color: #ffffff;
  }
  .popup {
    width: 100%;
    height:2rem;
    position: fixed;
    top:0;
    left:0;
    z-index:999;
    background: rgba(76,76,76,.7);
  }
  .popup .popcon {
    width: 100%;
    height:2rem;
  }
  .popup h3 {
    font-size:.4rem;
    color: #fff;
    float: right;
    margin-right:.3rem;
    margin-top:.2rem;
    width: 60%;
    text-align: right;
  }
  .popup .jiantou {
    float: right;
    margin-right:.2rem;
    margin-top:.1rem;
  }
  .popup .close {
    float: right;
    margin-top:.1rem;
    margin-right:.1rem;
  }



  .banner {
    width: 100%;
    height:auto;
  }
  .banner .swiper-container {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .banner .swiper-container .swiper-slide {
    text-align: center;
    font-size: .4rem;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .banner .swiper-container .swiper-slide img {
    width:100%;
    height:auto;
  }
  .group {
    width: 90%;
    height:auto;
    border-bottom:1px solid #dddddd;
    margin:0 auto;
    padding:.2rem;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*align-items: center;*/
    /*justify-content: space-between;*/
  }
  .logo {
    display: flex;
    align-items: center;
  }
  .logo div{
    width: .3rem;
    height: .3rem;
    background: #000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .logo span {
    display: block;
    width: .25rem;
    height: .25rem;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-left:-.1rem;
  }
  .group h3{
    margin-left:.2rem;
    font-size:.4rem;
  }
  ul {
    padding-left:.7rem;
    margin:.3rem 0;
  }

  ul .process{
    width: 100%;
    /*height: .6rem;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size:.4rem;
  }
  ul .process .box {
    /*width: 100%;*/
    display: flex;
    align-items:center;
  }
  ul .process .box>div{
    width: .25rem;
    height: .25rem;
    border:1px solid #999;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul .process .box .ling {
    width: .1rem;
    height: .1rem;
    background: #000;

  }
  ul .process .box .lingbox {
    border:1px solid #333;
  }
  ul .process .box p {
    margin-left:.3rem;
    color: #999;
  }
  ul i.process p {
    color: #999;
  }
  /*ul li.state p.stage {*/
  /*margin-left:1.2rem;*/
  /*}*/
  ul .state p{
    color: #000 !important;
  }
  ul .state .lingbox {
    border:1px solid #000 !important;
  }
  ul .state>div .ling {
    width: .15rem;
    height: .15rem;
    background: #000;
  }
  ul li .line {
    width: 100%;
  }
  ul li .line div {
    width: 1px;
    height:.5rem;
    background: #999;
    margin-left:.15rem;
  }
  .mj {
    color: #333 !important;
  }



  .nurse {
    width: 90%;
    height:1.6rem;
    border-bottom:1px solid #dddddd;
    margin:0 auto;
    padding:.2rem;
    display: flex;
  }
  .nurse .left {
    width: 68%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border-right:1px solid #dddddd;
    padding-left:.3rem;
  }
  .nurse .left h3 {
    width: 100%;
    font-size:.5rem;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
  }
  .nurse .left p {
    font-size:.48rem;
    color: #ff5454;
    margin-top:.2rem;
    vertical-align: bottom;
  }
  .nurse .left del{
    font-size:.36rem;
    color: #999;
    margin-top:.2rem;
    margin-left:.2rem;
  }
  .nurse .right {
    width: 32%;
    display: flex;
    flex-wrap: wrap;
    padding:.2rem .2rem;
    justify-content: center;
    align-items: center;
  }
  .nurse .right .circle {
    width: .4rem;
    height: .4rem;
    border:1px solid #333333;
    background: #d6d6d6;
    border-radius:50%;
    position: relative;
  }
  .nurse .right .circle div {
    width: .16rem;
    height: .16rem;
    border-left:1px solid #333333;
    border-bottom:1px solid #333333;
    position: absolute;
    top:.1rem;
    left:.15rem;
  }
  .nurse .right p {
    margin-left:.2rem;
    font-size:.36rem;
    color: #666;
  }
  .nurse .right span {
    font-size:.4rem;
    color: #333333;
    text-align: center;
  }
  .color1 {
    color: #d18bcf !important;
  }
  .color2 {
    color: #3c68e6 !important;
  }
  .color3 {
    color:#3da6ff !important;
  }
  .color4 {
    color: #ff5454 !important;
  }
  .color5 {
    color: #d29f15 !important;
  }
  .color6 {
    color:#3da6ff !important;
  }
  .color7 {
    color: #58b884 !important;
  }
  .v-spinner {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: #fff;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }

  .foot {
    width: 80%;
    padding:0 10%;
    height: 1.5rem;
    border-top:1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content:space-between;
    position: fixed;
    bottom:0;
    left:0;
    background: #ffffff;
  }
  .foot p {
    font-size:.4rem;
  }
  .foot p span {
    color: #ff5454;
  }
  .foot a {
    display: block;
    width: 4rem;
    text-align: center;
    height:1rem;
    line-height:1rem;
    background: #000;
    color: #ffffff;
    letter-spacing: 2px;
    font-size:.4rem;
  }

</style>
